import { defineComponent, reactive, ref, nextTick } from "vue";
import styles from "./recording.module.less";
import { message } from "ant-design-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { useStore as useUserStore } from "@/store/user";
import 'rrweb-player/dist/style.css';
import rrwebPlayer from 'rrweb-player';
import {$orderGetScreenRecord} from "@/api/order/order";
export default defineComponent({
  emits: ["cancel"],
  setup(props, { emit, expose }) {
    const userStore = useUserStore();
    const state = reactive({
    } as any);
    const addPopupRef = ref(null as any);
    let rrwebPlayerInstance:any = null;
    const open = (e: any,type:any) => {
      message.loading({ content: '加载中...', key: 'loading' });
      $orderGetScreenRecord({"order_no":e}).then((res:any)=>{
        if(res.data.length === 0)
        {
          message.error('无录屏数据!');
          emit("cancel");
          return;
        }
        res.data.forEach((item:any)=>{
              let events = item.screen_record;
              if (!events) {
                message.error('无录屏数据!');
                emit("cancel");
                return;
              }
              events = decodeURIComponent(events);
              addPopupRef.value.open();
              emit("cancel");
              nextTick(() => {
                const screenRecordDiv = document.createElement('div');
                screenRecordDiv.setAttribute('id', 'screenRecord');
                document.getElementById('screenRecordBox')?.appendChild(screenRecordDiv)
                const target: any = document.getElementById('screenRecord');
                rrwebPlayerInstance = new rrwebPlayer({
                  target,
                  props: {
                    events: JSON.parse(events)
                  }
                })
              })
        })
      }).finally(()=>{
        message.success({ content: '加载完成!', key: 'loading', duration: 2 });
      })
    };
    const close = () => {
      rrwebPlayerInstance.pause();
      document.getElementById('screenRecord')?.remove();
    };
    expose({
      open,
      close,
    });
    const Components = () => (
      <LPopup title={"个单回溯" } ref={addPopupRef} onBeforeClose={()=>{
          close();
      }}>
        {
         <div class={styles.screenRecord} id="screenRecordBox"></div>
        }
   
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});